<template>
	<div>
		<div class="video-list">
			<!-- video op -->
			<div class="video-shell" :style="index === 0 && 'border: none'" v-for="(item,index) in res_store" :key="item.aid">
				<div class="video-ranking clear">
					<div class="video-date">
						<span>{{ item.add_time }}</span>
						<span class="del-btn" @click="storeDelFn(item)">移除</span>
					</div>
					<div class="video-view">
						<router-link :to="{path: `video/${item.aid}`}" target="_blank" class="video-link">
							<div class="video-img">
								<img :src="imgBaseUrl+item.pic" alt="" />
							</div>
							<div class="video-info">
								<span :class="`icon-from icon-from-${item.pub_platform}`"></span>
								<span class="video-minutes">{{item.minute}}</span>
							</div>
						</router-link>
					</div>
					<div class="video-info-box">
						<router-link :to="{path: `video/${item.aid}`}" target="_blank" class="video-title video-link" >{{item.title}}</router-link>
						<div class="video-info">
							<span :class="item.storeClass" @click="storeFn(item)">{{item.store_num}}</span>
							<span :class="item.good" @click="goodFn(item)">{{item.good_num}}</span>
						</div>
					</div>
				</div>
			</div>
			<!-- video ed -->
		
			<div class="loading-more">
				<span class="btn" @click="getResData" v-if="pageBtn">加载更多...</span>
				<span v-if="!pageBtn">没有更多了...</span>
			</div>
		</div>
	</div>
</template>

<script>
import { storefrontGetlist, storefrontDel, updategood, storefrontAdd, imgBaseUrl } from '@/api';
import { utilStore, utilGood } from '@/util/util'
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
	data() {
		return {
			res_store: [],
			res_store_num: null,
			imgBaseUrl,

			pageBtn: false,
			page: 1,
		}
	},
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	mounted() {
		this.getResData();
	},
	methods: {
		...mapActions([
			'getUserInfo'
		]),
		...mapMutations([
			'DIALOG_LOGIN',
			'OUT_LOGIN',
		]),

		// 收藏 
		storeFn(item){
			utilStore(item, this, 'res_store', storefrontAdd);
		},
		goodFn(item){
			utilGood(item, this, 'res_store', updategood);
		},

		storeDelFn(item){
			let para = {
				user_id: this.userInfo.user_id,
				aid: item.aid,
			}
			storefrontDel(para).then(res => {
				if(res.data){
					this.$message.success(res.msg);
					var index = this.res_store.indexOf(item)
					if (index !== -1) {
						this.res_store.splice(index, 1);
					}
				}else{
					if(!res.tologin){
						this.$message.warning(res.msg);
					}else{
						this.$router.push('/');
						this.DIALOG_LOGIN();
					}
				}
			});
		},
		getResData(){
			let para={
				user_id: this.userInfo?this.userInfo.user_id:'',
				page: this.page,
				pagesize: 5,
			};
			storefrontGetlist(para).then(res => {
				if(res.data){
					if(this.page===1){
						// this.noData = false;
						// this.commentList = res.data.list;
						let data = res.data; 
						for(let i =0;i<data.length; i++){
							data[i].storeClass = 'icon-bg icon-store';
							data[i].good = 'icon-bg icon-good-o';
							data[i].goodcan = true;
						}
						this.res_store = data
						this.res_store_num = res.total;

						if(res.total>5){
							this.pageBtn = true;
						}else{
							this.pageBtn = false;
						}

					}else{
						this.res_store = this.res_store.concat(res.data);
					}
					let pageTotal = Math.ceil(res.total/5);
					if(this.page<pageTotal){
						this.page++;
					}else{
						this.pageBtn = false;
					}
				}else{
					if(!res.tologin){
						this.$message.warning(res.msg);
					}else{
						this.$router.push('/');
						this.OUT_LOGIN();
					}
				}
			});
		},
	},
}
</script>

<style scoped lang="scss">
.video-list {
	.video-shell {
		border-top: 1px solid #ccc;
		padding-bottom: 10px;
		.video-ranking {
			position: relative;
			top: 0;
			left: 0;
			padding: 20px 0px 20px 20px;
			width: 100%;

			.video-date {
				position: absolute;
				top: 40%;
				right: 20px;
				cursor: pointer;
				.del-btn{
					margin-left: 30px;
				}
				.del-btn:hover {
					color:#f86254;
				}
			}

			.video-view{
				float: left;
				position: relative;
				top: 0;
				left: 0;
				width: 180px;
				height: 100px;
				.video-img {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 100%;
				}
				.video-info {
					position: absolute;
					bottom: 6px;
					left: 6px;
					z-index: 2,
				}
				.video-minutes {
					vertical-align: middle;
					padding-left: 4px;
					font-size: 12px;
					color:#fff;
				}
			}

			.video-info-box {
				float: left;
				padding-top: 20px;
				padding-left:20px;
				width: 400px;
				.video-info {
					padding-top: 20px;
					font-size: 12px;
				}
				.icon-store-o{
					background-position: 0 -144px;
				}
				.icon-good-o{
					background-position: 0 -128px;
				}
				.icon-store,.icon-store-o:hover{
					background-position: 0 -48px;
				}
				.icon-good,.icon-good-o:hover {
					background-position: 0 -16px;
				}
			}
			.video-title {
				height: 18px;
				line-height: 18px;
				font-size: 16px;
				font-weight: bold;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.video-title:hover {
				color: #f86254;
			}
		}
		.video-ranking:hover {
			background: rgba(248, 248, 248, 1);
		}
	}
}
</style>